<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>
<script lang="ts" setup>
  import { getJiZhongHuiShouXiangQinPeiZhi } from '@/api/shengChanJianShi'
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatusRecycle from '../components/tabComponents/recycling/groupStatus_Recycle.vue'
  import RecyclingDetails from '../components/tabComponents/recycling/recyclingDetails.vue'

  const tabname = ref('')
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '111510',
      label: '状态总览',
      roles: ['111510'],
      slots: { default: h(GroupStatusRecycle, { statusCode: '111510', processName: '集中回收' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }

  const getJiZhongHuiShouXiangQinPeiZhiData = () => {
    getJiZhongHuiShouXiangQinPeiZhi().then((res: any) => {
      tabs.value = [
        ...tabs.value,
        ...res.map((item) => {
          return {
            name: item.machineName,
            label: '集中回收-' + item.machineName + '详情',
            slots: {
              default: h(RecyclingDetails, { versionId: item.collectVersionId, id: item.id })
            }
          }
        })
      ]
    })
  }

  onMounted(() => {
    getJiZhongHuiShouXiangQinPeiZhiData()
  })
</script>
<style lang="less"></style>
